import React, {
	PureComponent
} from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import {
	Form
} from 'antd'
import LoginItem from './LoginItem'
import LoginSubmit from './LoginSubmit'
import LoginContext from './loginContext'

import styles from './index.less'

class Login extends PureComponent {
	static propTypes = {
		onSubmit: PropTypes.func
	}
	getContext = () => {
		const {
			form
		} = this.props
		return {
			form: {
				...form
			}
		}
	}
	handleSubmit = (e) => {
		e.preventDefault()
		const {
			form,
			onSubmit
		} = this.props

		form.validateFields((err, values) => {
			onSubmit(err, values)
		})
	}
	render() {
		const {
			className,
			children
		} = this.props;
		return (
			<LoginContext.Provider value={this.getContext()}>
				<div className={classNames(className, styles.login)}>
					<Form onSubmit={this.handleSubmit}>
						{children}
					</Form>
				</div>
			</LoginContext.Provider>
		)
	}
}

Login.Submit = LoginSubmit
Object.keys(LoginItem).forEach(item => {
	Login[item] = LoginItem[item]
})

export default Form.create()(Login)